<template>
  <div class="conMain" >
      <el-card  class="box-card" style="padding: 0px!important;">
          <el-tabs v-model="activeType" @tab-click="handleClick" >
            <el-tab-pane :label="item" :name="index" v-for="(item,index) in typelist" />
          </el-tabs>
          <div  class="topfix">
            <div style="text-align: right;">
              <el-button v-has="'cms/category/add'"  type="primary" size="small" class="ml10" @click="add()" plain><i class="el-icon-plus" /> 添加分类</el-button>
            </div>
          </div>
          <el-table v-loading="loading"  row-key="id"  :tree-props="{children: 'childlist', hasChildren: 'hasChildren'}"  :data="list"  :empty-text='emtypetxt' >
              <el-table-column prop="name" label="名称"  min-width="100" />
              <el-table-column prop="id" label="ID"  align="left" min-width="80px"/>
              <el-table-column prop="image" label="分类图片"  align="left" >
                <template slot-scope="scope">
                  <el-image
                      style="width:40px;height:40px"
                      :src="scope.row.image"
                      :preview-src-list="[scope.row.image]"
                  >
                  <div slot="error" class="image-slot"></div>
                  </el-image>
                </template>
              </el-table-column>

              <el-table-column prop="weigh" label="排序" align="center"  />
              <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.status === 1" type="success" size="mini" disable-transitions>正常</el-tag>
                  <el-tag v-if="scope.row.status === 0" type="info" size="mini" disable-transitions>隐藏</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createtime" align="center" />

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-link v-has="'cms/category/edit'"  :underline="false" type="primary" title='编辑' @click.stop="edit(scope.row.id)">编辑</el-link>
                    <el-link v-has="'cms/category/del'" :underline="false" type="danger" title='删除' @click.stop="del(scope.row.id)" class="ml10">删除</el-link>
                </template>
              </el-table-column>
          </el-table>

      </el-card>

  </div>

</template>

<script>
import { category_index,type_list,category_add,category_edit,category_del } from  '@/api/cms'

export default {
  data() {
    return {
      activeType:'',
      typelist:[],
      loading:true,
      emtypetxt:'',
      list:[],
      params: {
        s_id:'',
        s_name:'',
        s_type:'',
        ss_name:'like',
      },
    }
  },
  created() {
    type_list().then(res => {
        this.typelist=res.data.typelist
        this.activeType=res.data.activeType
        this.params.s_type=this.activeType;
        this.getList()
    })
  },
  methods: {
    handleClick(tab, event) {
      this.params.s_type=tab.name;
      this.loading = true
      this.getList()

    },
    getList() {
      this.emtypetxt='加载中...';
      category_index(this.params).then(res => {
        this.list=res.data.list
        this.loading = false
        if(this.list.length==0){
          this.emtypetxt='暂无数据'
        }
      })
    },
    
    add(){
      this.$modalForm(category_add({type:this.activeType})).then(() => this.getList())
    },
    edit(id) {
      this.$modalForm(category_edit({id:id})).then(() => this.getList())
    },

    del(id) {
      let _this=this;
      _this.$modalSure().then(() => {
        category_del({ids:id}).then(res => {
          _this.$message.success(res.msg)
          _this.getList()
        })
      })
    },

  },

}
</script>

<style lang="scss" scoped>

  .topfix{
    padding: 20px 0px 10px 0px;
    border-bottom: 1px solid #e5e5e5;
  }


</style>
